<template>
    <div>
        <el-card class="!border-none w-[740px]" shadow="never">
            <el-table size="large" :data="lists">
				<el-table-column label="序号" type="index" min-width="90" />
				<el-table-column label="视频名称" prop="type" min-width="200">
                    <template #default="{ row }">
                        <span>{{ typeTxt(row.type) }}</span>
                    </template>
                </el-table-column>
				<el-table-column label="操作" width="120" fixed="right">
					<template #default="{ row }">
						<el-button v-perms="['article.article/setTutorialConfig']" type="primary" link @click="handleSure(row)">
							编辑
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
        <el-dialog v-model="visible" width="540px" title="视频教程">
            <el-form :model="form" :rules="show_rules" ref="fromShow">
                <el-form-item label="标题名称：" label-width="120px" prop="key">
                    <div>{{ typeTxt(form.type) }}</div>
                </el-form-item>
                
                <el-form-item label="上传视频文件" label-width="120px" prop="url">
                    <div>
                        <material-picker v-model="form.url" type="video" :limit="1"/>
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="visible = false">取消</el-button>
                    <el-button type="primary" @click="onConfirm">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup name="operationVideo">
import type {FormInstance} from 'element-plus'
import { getTutorialConfig, setTutorialConfig } from '@/api/operation';

const show_rules = reactive({
  url: [{required: false, message: '请上传视频', trigger: 'blur'}],
})
const lists = ref([])
const getList = async () => {
    const res = await getTutorialConfig({})
    lists.value = res;
}
getList()
//1.需求发布 2.产品上架 3.代理人邀请 4.服务商入驻 5.渠道商入驻
const typeTxt = (num:any) => {
    return computed(():string=>{
        let txt = '';
        switch(num) {
            case 1: txt = '需求发布教程';break;
            case 2: txt = '产品上架教程';break;
            case 3: txt = '代理人邀请教程';break;
            case 4: txt = '服务商入驻教程';break;
            case 5: txt = '渠道商入驻教程';break;
            case 6: txt = '用户合作单流程';break;
            case 7: txt = '渠道合作单流程';break;
            case 8: txt = '场地入驻流程';break;
            case 9: txt = '渠道助融分说明';break;
        }
        return txt;
    })
}
const fromShow = shallowRef<FormInstance>()
const visible = ref(false)
const handleSure = (row:any) => {
    visible.value = true;
    form.id = row.id;
    form.type = row.type;
    form.url = row.url;
}
const form = reactive({
    id: '',
    type: '',
    url: ''
})
const onConfirm = async () => {
    await fromShow.value?.validate();
    console.log(form)
    await setTutorialConfig(form)
    visible.value = false;
    getList()
}

</script>